<template>
  <div>
    <div v-if="type_id == 1">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="代理商全称" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                {{ scope.row.name }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          style="text-align: center"
          prop="username"
          label="代理商姓名"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="num" label="子代理书"> </el-table-column>
        <el-table-column prop="num" label="分润比例(%)"> </el-table-column>
        <el-table-column prop="num" label="注册商户数"> </el-table-column>
        <el-table-column prop="status" label="代理状态">
          <template slot-scope="scope">
            <el-switch
              disabled
              v-model="scope.row.status == 1 ? true : false"
              size="mini"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="有效日期"> </el-table-column>
        <el-table-column prop="timeState" label="生效状态">
          <template slot-scope="scope">
            <div :class="scope.row.timeState != 1 ? 'red' : ''">
              {{ scope.row.timeState == 1 ? '生效中' : '已过期' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="添加时间"> </el-table-column>
      </el-table>
      <div style="text-align: right; margin: 30px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="type_id == 3">
      <!-- 筛选条件 -->
      <el-card style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <span>支付通道：</span>
              <el-select v-model="search.channel" placeholder="请选择">
                <el-option label="直连" value="1"> </el-option>
                <el-option label="乐刷" value="2"> </el-option>
                <el-option label="瑞银信" value="3"> </el-option>
                <el-option label="联动优势" value="4"> </el-option>
                <el-option label="浦发银行支付" value="5"> </el-option>
                <el-option label="邮储" value="6"> </el-option>
                <el-option label="邮储线上支付" value="7"> </el-option>
                <el-option label="邮储手机银行" value="8"> </el-option>
                <el-option label="利群" value="9"> </el-option>
                <el-option label="运通支付" value="10"> </el-option>
                <el-option label="工商银行支付" value="11"> </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex">
              <el-select
                popper-class="select_class"
                clearable
                v-model="search.timeState"
                placeholder="请选择"
              >
                <el-option label="按生效结束时间" value="1"> </el-option>
                <el-option label="按添加时间" value="2"> </el-option>
              </el-select>
              <el-date-picker
                @change="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                align="left"
                v-model="search.timeValue"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="search.input3"
              class="input-with-select"
            >
              <el-select
                style="width: 100px"
                v-model="search.select"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option label="商户名称" value="1"></el-option>
                <el-option label="商户编码" value="2"></el-option>
                <el-option label="所属代理商" value="3"></el-option>
              </el-select>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="see"> 查询 </el-button>
            <el-button @click="clearFn"> 重置 </el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="name" label="商户名称" width="50">
          </el-table-column>
          <el-table-column prop="username" width="150" label="联系人">
          </el-table-column>
          <el-table-column prop="phone" width="150" label="手机号">
          </el-table-column>
          <el-table-column prop="num" width="150" label="所属代理商">
          </el-table-column>
          <el-table-column prop="num" width="150" label="支付通道">
          </el-table-column>
          <el-table-column prop="num" width="150" label="支付宝费率(%)">
          </el-table-column>
          <el-table-column prop="num" width="150" label="微信费率(%)">
          </el-table-column>
          <el-table-column
            prop="num"
            label="银联借记卡(≤1000元)费率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="银联借记卡（>1000元)费率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="银联借记卡封顶额（元）"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="银联贷记卡(≤1000元)费率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="银联贷记卡(>1000元)费率(%)"
            width="150"
          >
          </el-table-column>
          <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div
              @click="agentsee(scope.$index, scope.row)"
              style="color: #0067d9"
            >
              详情
            </div>
          </template>
        </el-table-column> -->
        </el-table>
        <div style="text-align: right; margin: 30px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div v-if="type_id == 4">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="设备SN编号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="设备类型"> </el-table-column>
        <el-table-column prop="phone" label="设备型号"> </el-table-column>
        <el-table-column prop="num" label="商户名称"> </el-table-column>
        <el-table-column prop="num" label="门店名称"> </el-table-column>
        <el-table-column prop="num" label="所属学校"> </el-table-column>
        <el-table-column prop="statuS" label="使用状态">
          <template slot-scope="scope">
            <div v-if="scope.row.statuS == 1">已绑定</div>
            <div v-if="scope.row.statuS == 2">未绑定</div>
            <div v-if="scope.row.statuS == 3">正常</div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="归属代理商"> </el-table-column>
        <el-table-column prop="name" label="扩展员"> </el-table-column>
      </el-table>
      <div style="text-align: right; margin: 30px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      timeValue: '',
      timeState: '',
      search: {},
      type_id: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          username: '汉汇科技',
          phone: '18336654785',
          num: 1.5,
          timeState: '1',
          status: '1',
          statuS: '1'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          username: '汉汇科技',
          phone: '18336654785',
          num: 1.5,
          timeState: '2',
          status: '2',
          statuS: '1'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          username: '汉汇科技',
          phone: '18336654785',
          num: 1.5,
          timeState: '1',
          status: '1',
          statuS: '2'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          username: '汉汇科技',
          phone: '18336654785',
          num: 1.5,
          timeState: '1',
          status: '1',
          statuS: '3'
        }
      ]
    }
  },
  mounted () {
    this.type_id = this.$route.params.id
  },

  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    agentsee () {
      console.log('查看详情')
    },
    time () {
      if (this.timeState == 1) {
        delete this.search.add_time
        this.search.over_time = this.timeValue
      } else if (this.timeState == 2) {
        delete this.search.over_time
        this.search.add_time = this.timeValue
      }
    },
    see () {
      console.log('查询', this.search)
    },
    clearFn () {
      this.search = {}
    },
    setTitle (title) {
      document.title = title
    }
  }
}
</script>
<style scoped>
/deep/ .el-table__cell {
  text-align: center;
}
.red {
  color: red;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
